<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        .dropdown{
            position: relative;
        }

        .dropdown:hover .dropdown-menu {
            display: block;
        }

        .dropdown-menu {
            border-top: 5px solid transparent;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 160px;
            max-width: 300px;
            padding: 0px 0;
            margin: 0px 0 0 0;
            list-style: none;
            text-shadow: none;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            border-radius: 0px;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

    </style>

</head>
<body>

<div>
    <li class="dropdown">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="halflings-icon white user"></i> Dennis Ji
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li class="dropdown-menu-title">
                <span>Account Settings</span>
            </li>
            <li><a href="#"><i class="halflings-icon user"></i> Profile</a></li>
            <li><a href="login.html"><i class="halflings-icon off"></i> Logout</a></li>
        </ul>
    </li>
</div>

</body>
</html>